<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <SearchForm
          v-show="showSearch"
          v-model="queryParams"
          :options="options.formOps"
          @onQuery="getTabelList"
          @onResetQuery="resetQuery"
        >
          <template #default="{ filterForm }">
            <el-form-item label="开始时间">
              <el-date-picker
                v-model="filterForm.startTime"
                type="datetime"
                format="YYYY-MM-DD HH:mm:ss"
                style="width: 100%"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
            <el-form-item label="结束时间">
              <el-date-picker
                v-model="filterForm.endTime"
                type="datetime"
                style="width: 100%"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </template>
        </SearchForm>
        <el-row :gutter="10" class="mb8">
          <right-toolbar
            v-model:showSearch="showSearch"
            @queryTable="getTabelList"
          ></right-toolbar>
        </el-row>
        <!-- <Table
          ref="table"
          :auto-featch="true"
          :fetch-data="fetchData"
          :options="options.table"
          :useAction="false"
          :usePage="true"
        >
        </Table> -->
        <el-table
          ref="tableRef"
          :data="tableData"
          style="width: 100%; margin: 0 auto"
          show-summary
          :summary-method="getSummaries"
          :span-method="arraySpanMethod"
          :header-cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column
            label="企业重大危险源安全包保责任人排查情况(按重大危险源统计)"
          >
            <el-table-column
              type="index"
              label="序号"
              width="80"
              align="center"
            />
            <el-table-column
              prop="dangerName"
              label="重大危险源名称"
              align="center"
            />
            <el-table-column label="总排查任务" align="center">
              <el-table-column
                prop="qtaskCount"
                label="完成任务数"
                width="120"
                align="center"
              />
              <el-table-column
                prop="qrate"
                label="完成率"
                width="120"
                align="center"
              />
            </el-table-column>
            <el-table-column label="主要负责人" align="center">
              <el-table-column
                prop="ztaskCount"
                label="完成任务数"
                width="120"
                align="center"
              />
              <el-table-column
                prop="zrate"
                label="完成率"
                width="120"
                align="center"
              />
            </el-table-column>
            <el-table-column label="技术负责人" align="center">
              <el-table-column
                prop="jtaskCount"
                label="完成任务数"
                width="120"
                align="center"
              />
              <el-table-column
                prop="jrate"
                label="完成率"
                width="120"
                align="center"
              />
            </el-table-column>
            <el-table-column label="操作负责人" align="center">
              <el-table-column
                prop="ctaskCount"
                label="完成任务数"
                width="120"
                align="center"
              />
              <el-table-column
                prop="crate"
                label="完成率"
                width="120"
                align="center"
              />
            </el-table-column>
            <el-table-column label="隐患数量" align="center">
              <el-table-column
                prop="hiddenCount"
                label="发现隐患数量"
                width="120"
                align="center"
              />
              <el-table-column
                prop="completeHiddenCount"
                label="完成整改数量"
                width="120"
                align="center"
              />
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import Table from "@/components/Table/index.vue";
import SearchForm from "./components/searchForm.vue";
import formJson from "./components/options.json";
import { apis as APIS } from "@/api/hdanger/lvzhijilu/new";
import { useAsyncData, useFormJsonNew } from "@/views/hooks/useAsyncData.js";
import { deptTreeSelect } from "@/api/system/user";
const { proxy } = getCurrentInstance();
const tableData = ref([]);
const tableRef = ref();
const tableTotal = ref([]);
const form = ref({});
const getSummaries = (param) => {
  const { columns, data } = param;
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = "汇总";
      return;
    }
  });
  tableTotal.value.forEach((item) => {
    sums.push(item);
  });
  return sums;
};
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (tableRef.value.$el) {
    let current = tableRef.value.$el
      .querySelector(".el-table__footer-wrapper")
      .querySelector(".el-table__footer");
    let cell = current.rows[0].cells;
    cell[0].colSpan = "2";
  }
};

const ops = useFormJsonNew(formJson, {
  sort: [],
  sortable: [],
});
const options = reactive({
  table: ops,
  formOps: ops.filter((i) => [""].includes(i.prop)),
});
const showSearch = ref(true);
const table = ref();
const filterTime = ref([]);
const { fetchData, getList, queryParams } = useAsyncData({
  APIS: {
    query: APIS.lztj,
  },
  formJson,
  table,
  proxy,
});
const resetQuery = () => {
  initTime();
  getTabelList();
};
const getTabelList = () => {
  APIS.lztj({ ...queryParams.value }).then((res) => {
    let data = JSON.parse(JSON.stringify(res.data));
    let total = data.pop();
    tableData.value = data;
    tableTotal.value = [
      total.qtaskCount,
      total.qrate,
      total.ztaskCount,
      total.zrate,
      total.jtaskCount,
      total.jrate,
      total.ctaskCount,
      total.crate,
      total.hiddenCount,
      total.completeHiddenCount,
    ];
  });
};
const initTime = () => {
  // 获取当前日期对象
  var currentDate = new Date();

  // 获取当前日期是所在周的第几天 (0~6，0表示周日)
  var currentDay = currentDate.getDay();

  // 计算上一周的开始日期
  var startOfLastWeek = new Date(currentDate);
  startOfLastWeek.setDate(currentDate.getDate() - currentDay - 6);

  // 计算上一周的结束日期
  var endOfLastWeek = new Date(startOfLastWeek);
  endOfLastWeek.setDate(startOfLastWeek.getDate() + 6);

  // 格式化日期为字符串（YYYY-MM-DD）
  var formattedStartDate = startOfLastWeek.toISOString().split("T")[0];
  var formattedEndDate = endOfLastWeek.toISOString().split("T")[0];
  queryParams.value.startTime = `${formattedStartDate} 00:00:00`;
  queryParams.value.endTime = `${formattedEndDate} 23:59:59`;
};

onMounted(() => {
  initTime();
  getTabelList();
});

const getNextDate = (date, day) => {
  var dd = new Date(date);
  dd.setDate(dd.getDate() + day);
  var y = dd.getFullYear();
  var m =
    dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
  var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
  return y + "-" + m + "-" + d;
};
</script>

<style lang="scss" scoped>
::v-deep.el-form-item__label {
  text-align: right !important;
}
</style>
